<template>
  <div id="app2">
    <h2>{{info}}</h2>
    <ul v-for="(item,index) in lists" :key="index" @click='add(index)'>
      <li><img :src="item.img" alt=""></li>
      <li class="name">{{item.title}}</li>
      <li>{{item.pj}}</li>
      <li>{{item.dp}}</li>
      <li>{{item.price}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Shop",
    data(){
      return{
        info:"子组件"
      }
    },
    props:{
      lists:{
        type:Array,
      }
    },
     methods:{
      add(index){
        const arrs=this.lists[index];
        this.$emit("addgouwu", arrs);
      }
      
    },
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
 #app2{
   ul{
     float: left;
     margin-left:50px;
     li{
       width: 200px;
      
     }
      .name{
         overflow: hidden;
         text-overflow:ellipsis;
          white-space: nowrap;
          widows: 200px;
       }
   }
 }
</style>